<template>
  <div class="common-layout" style="width: 1250px;">
    <el-container>
      <el-header style="align-items: center; display: flex; justify-content: space-between;background-color: #215BA5;">
        <span>欢迎用户:{{ store.counterStore.userName }}登录</span>
        <el-button style="width: 100px;" type="primary" @click="ToLogin()">退出登录</el-button>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-col :span="12">
            <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
              default-active="2" text-color="#fff" style="width: 300px;" router>
              <el-sub-menu index="1">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>授权中心</span>
                </template>
                <el-menu-item index="/AddMain">添加用户</el-menu-item>
                <el-menu-item index="/AddRole">添加角色</el-menu-item>
                <el-menu-item index="/GetMain">用户列表</el-menu-item>
                <el-menu-item index="GetRole">角色列表</el-menu-item>
                <el-menu-item index="/AddMenu">添加菜单</el-menu-item>
                <el-menu-item index="/GetMenu">菜单列表</el-menu-item>
                <el-menu-item index="/AddRoleMenu">添加角色菜单</el-menu-item>
                <el-menu-item index="Setting">试验界面</el-menu-item>
                <el-menu-item index="/MianView">动态菜单</el-menu-item>
                <el-menu-item index="/AddRoleMenu">添加角色菜单</el-menu-item>
                <el-menu-item index="/Settings">测试王浩燃界面</el-menu-item>
              </el-sub-menu>
              <!-- <el-sub-menu index="2">
  <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>订单管理</span>
                </template>
                <el-menu-item index="CreateOrders">生产订单</el-menu-item>
                <el-menu-item index="QueryOrders">订单列表</el-menu-item>
                <el-menu-item index="QueryProcurement">采购单据列表</el-menu-item>
                <el-menu-item index="QueryPurchase">采购明细列表</el-menu-item>
                <el-menu-item index="CreateVendor">新增供应商</el-menu-item>
                <el-menu-item index="CreateProcurement">新增采购信息</el-menu-item>
                <el-menu-item index="CreateClient">新增客户信息</el-menu-item>
                <el-menu-item index="QueryClient">客户信息列表</el-menu-item>
                <el-menu-item index="CreateSale">销售合同</el-menu-item>
                <el-menu-item index="QuerySale">销售合同列表</el-menu-item>
                <el-menu-item index="CreateProducts">新增产品</el-menu-item>
                <el-menu-item index="QueryProducts">产品列表</el-menu-item>
                <el-menu-item index="CreateSalesReturns">新增销售退货</el-menu-item>
                <el-menu-item index="CreateEntraction">新增采购退货</el-menu-item>
                <el-menu-item index="QuerySalesReturns">销售退货列表</el-menu-item>
                <el-menu-item index="QueryExtraciton">采购退货列表</el-menu-item>
</el-sub-menu>
<el-sub-menu index="3">
  <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>报表管理</span>
                </template>
  <el-menu-item index="AddDispatchProduct">新增派工</el-menu-item>
  <el-menu-item index="GetDispatchProduct">派工明细</el-menu-item>
  <el-menu-item index="AddOutsourcing">新增委外</el-menu-item>
  <el-menu-item index="GetOutsourcing">委外明细</el-menu-item>
  <el-menu-item index="AddProcess">新增工序</el-menu-item>
  <el-menu-item index="GetProcess">工序列表</el-menu-item>
</el-sub-menu>
<el-sub-menu index="4">
  <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>生产计划</span>
                </template>
  <el-menu-item index="AddProductionPlanning">添加计划</el-menu-item>
  <el-menu-item index="GetProductionPlanningList">显示计划列表</el-menu-item>
</el-sub-menu>
<el-sub-menu index="5">
  <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>物料清单</span>
                </template>
  <el-menu-item index="/GetMaterials">物料清单列表</el-menu-item>
  <el-menu-item index="/ShowMaterialsPicking">生产领料列表</el-menu-item>
  <el-menu-item index="/ShowFeeding">生产补料列表</el-menu-item>
  <el-menu-item index="/ShowStripping">生产退料列表</el-menu-item>
  <el-menu-item index="/Showscraps">生产废料列表</el-menu-item>
  <el-menu-item index="/GETPicking">领料剩余表</el-menu-item>

</el-sub-menu>
<el-sub-menu index="6">
  <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>仓库管理</span>
                </template>
                <el-menu-item index="/AddWareHouse">新增仓库</el-menu-item>
                <el-menu-item index="/GetWareHouse">仓库列表</el-menu-item>
                <el-menu-item index="/AddStockInApplication">入库申请表</el-menu-item>
                <el-menu-item index="/GetStockInApplication">入库申请列表</el-menu-item>
                <el-menu-item index="/AddOutbound">出库申请表</el-menu-item>
                <el-menu-item index="/GetOutbound">出库申请列表</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="7">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>货物管理</span>
                </template>
                <el-menu-item index="/AddGoods">货物添加</el-menu-item>
                <el-menu-item index="/ShowGoods">货物列表</el-menu-item>

              </el-sub-menu>
              <el-sub-menu index="8">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>调拨管理</span>
                </template>
                <el-menu-item index="/AddAllocate">调拨添加</el-menu-item>
                <el-menu-item index="/ShoAllocate">调拨列表</el-menu-item>
              </el-sub-menu>  -->
              <el-sub-menu index="9">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>包装管理</span>
                </template>
                <el-menu-item index="/AddPackagingPlanView">计划排程</el-menu-item>
                <el-menu-item index="/AddCompletedStorage">完工入库申请</el-menu-item>
                <el-menu-item index="/GETCompletedStorage">完工入库列表</el-menu-item>
                <el-menu-item index="/AddCompletedfinished">包装完工申请</el-menu-item>
                <el-menu-item index="/GetCompletedfinished">包装完工列表</el-menu-item>
                <el-menu-item index="/AddWareHouse">新增仓库</el-menu-item>
                <el-menu-item index="/GetWareHouse">仓库列表</el-menu-item>
                <el-menu-item index="/AddStockInApplication">入库申请表</el-menu-item>
                <el-menu-item index="/GetStockInApplication">入库申请列表</el-menu-item>
                <el-menu-item index="/AddOutbound">出库申请表</el-menu-item>
                <el-menu-item index="/GetOutbound">出库申请列表</el-menu-item> <el-menu-item
                  index="/AddPackagingQuality">包装质检申请</el-menu-item>
                <el-menu-item index="/GetPackagingQuality">包装质检列表</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="10">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>交接班</span>
                </template>
                <el-menu-item index="/CreateTeam">新增交接班</el-menu-item>
                <el-menu-item index="/QueryTeam">交接班列表</el-menu-item>
                <el-menu-item index="/CreateMonitor">新增过程监控</el-menu-item>
                <el-menu-item index="/QueryMonitor">过程监控列表</el-menu-item>
                <el-menu-item index="/CreateReport">报工信息</el-menu-item>
                <el-menu-item index="/QueryReport">报工列表</el-menu-item>
                <el-menu-item index="/CreatePower">动力准备</el-menu-item>
                <el-menu-item index="/QueryPower">动力准备列表</el-menu-item>
                <el-menu-item index="/CreateFiltrate">新增发酵液</el-menu-item>
                <el-menu-item index="/QueryFiltrate">发酵液列表</el-menu-item>
                <el-menu-item index="/CreateSales">销售记录表单</el-menu-item>
                <el-menu-item index="/QuerySales">销售记录列表</el-menu-item>
                <el-menu-item index="/CreateContact">联系记录表单</el-menu-item>
                <el-menu-item index="/QueryContect">联系记录列表</el-menu-item>
                <el-menu-item index="AddVendor">新增供应商</el-menu-item>
                <el-menu-item index="GetVendor">供应商列表</el-menu-item>
                <el-menu-item index="VendorItems">供应商物品</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="11">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>过滤管理</span>
                </template>
                <el-menu-item index="/AddProcessMonitoring">过程监控申请</el-menu-item>
                <el-menu-item index="/GetProcessMonitoring">过程监控列表</el-menu-item>

                <el-menu-item index="/AddProcess">工序列表申请</el-menu-item>
                <el-menu-item index="/GetProcess">工序列表列表</el-menu-item>

                <el-menu-item index="/AddProductionTask">专检申请申请</el-menu-item>
                <el-menu-item index="/GetProductionTask">专检申请列表</el-menu-item>
                <el-menu-item index="/AddAbnormal">异常处理报告</el-menu-item>
                <el-menu-item index="/GetAbnormal">异常处理信息</el-menu-item>

                <el-menu-item index="/AddCleaning">添加设备清洗</el-menu-item>
                <el-menu-item index="/GetCleaning">设备清洗列表</el-menu-item>
                <el-menu-item index="/AddFeedings">添加投料信息</el-menu-item>
                <el-menu-item index="/GetFeedings">投料列表信息</el-menu-item>
                <el-menu-item index="/AddTickets">新增工单信息</el-menu-item>
                <el-menu-item index="/GetTicket">工单列表信息</el-menu-item>

                <el-menu-item index="/AddArrival">到货质检信息</el-menu-item>
                <el-menu-item index="/GetArrival">到货质检列表</el-menu-item>
                <el-menu-item index="/GetPurchaseInfo">到货质检明细列表</el-menu-item>

                <el-menu-item index="/AddQualityLnspection">质检工单信息</el-menu-item>
                <el-menu-item index="/GetQualityLnspection">质检工单列表</el-menu-item>
                <el-menu-item index="/GetQualityReportWork">质检报工列表</el-menu-item>
                <el-menu-item index="/SHOWQualityReportWork">质检报工记录</el-menu-item>

              </el-sub-menu>
              <el-sub-menu index="12">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>工序管理</span>
                </template>
                <el-menu-item index="/GeetProcessTypeView">工序分类列表</el-menu-item>
                <el-menu-item index="/GetProcedureView">工序列表</el-menu-item>
                <el-menu-item index="/AddCraftsmanshipView">新增工艺</el-menu-item>
                <el-menu-item index="/GetCraftsmanshipView">工艺列表</el-menu-item>
                
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-aside>
        <el-main>
          <div class="main-content-wrapper">
            <RouterView />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useCounterStore } from '@/stores/counter'
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'

const store = useCounterStore();

const ToLogin = () => {
  location.href = '/'
}
</script>

<style scoped>
.common-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 1250px;
  min-height: 90%;
  margin: auto;
  justify-content: center;
  background-image: url('images/背景.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
  background-color: #f0f2f5;
  /* 备用背景色 */
}

.common-layout::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  /* 调整透明度 */
  backdrop-filter: blur(2px);
  /* 添加模糊效果 */
}

/* 主内容容器 */
.el-main {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.8);
  padding: 30px;
  box-sizing: border-box;
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 垂直居中 */
}

/* 内容区域包装器（增加最大宽度和居中效果） */
.main-content-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

/* 头部优化 */
.el-header {
  background-color: rgba(33, 91, 165, 0.95) !important;
  backdrop-filter: blur(5px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 侧边栏优化 */
.el-aside {
  background-color: rgba(84, 92, 100, 0.95) !important;
  backdrop-filter: blur(5px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* 菜单项悬停效果优化 */
.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  transform: translateX(5px);
}

/* 响应式优化 */
@media (max-width: 768px) {
  .common-layout {
    width: 100%;
    padding: 10px;
  }

  .main-content-wrapper {
    padding: 20px;
    border-radius: 8px;
  }

  .el-main {
    padding: 15px;
  }
}

/* 添加全局字体优化 */
body {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* 按钮美化 */
.el-button {
  transition: all 0.3s ease !important;
  letter-spacing: 0.5px;
}

.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
</style>
